<template>
  <div>
    <ElForm class="person-form">
      <ElFormItem label="姓名">
        <ElInput v-model="person.name"></ElInput>
      </ElFormItem>
      <ElFormItem label="年龄">
        <ElInputNumber v-model="person.age"></ElInputNumber>
      </ElFormItem>
      <ElFormItem label="生日">
        <ElDatePicker v-model="person.birthday" type="datetime"></ElDatePicker>
      </ElFormItem>
      <ElFormItem label="性别">
        <ElSelect v-model="person.sex">
          <ElOption
            v-for="(e, i) in sexEnums"
            :key="i"
            :label="e.label"
            :value="e.value"
          ></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElButton @click="submit()">提交</ElButton>
    </ElForm>
    <h2> v-bind:xxx  :xxx  </h2>
    <h2> v-on:click  @click </h2>
    <h2> v-for  v-if  </h2>
    <h2> v-model </h2>
    <!--  -->

  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default {
  name: 'RoundSixth',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      person: {
        name: '',
        age: 0,
        birthday: new Date(),
        sex: 'man'
      },
      sexEnums: [
        { label: '男', value: 'man' },
        { label: '女', value: 'woman' }
      ]
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    submit() {
      console.log(this.person)
      this.$message.warning(
        '校验通过.axios待发送数据:' + JSON.stringify(this.person))
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="css" scoped>
.person-form {
  width: 240px;
  border: 1px solid orange;
}
</style>
